import SystemContext from "@/app/SystemContext";
import { Menu, MenuProps } from "antd";
import { useRouter } from "next/router";
import { useContext, useEffect, useMemo } from "react";
import menuRouter from "@/router/index";
import useMenuData from "@/hooks/useMenuData";

interface IProps {}

export default function SystemMenu(props: IProps) {
  const systemData = useContext(SystemContext);
  const { setSystemInfo } = systemData || {};
  const router = useRouter();

  const { activeKey } = useMenuData();

  const items = useMemo(() => {
    return menuRouter
      .filter((x) => !x.hidden)
      .map((x) => ({ ...x, key: x.pathname }));
  }, []);

  useEffect(() => {
    setSystemInfo?.((pre) => {
      return { ...pre, activeKey: items[0].pathname };
    });
  }, []);

  const onClick: MenuProps["onClick"] = (e) => {
    console.log("click ", e);

    const _page = items.find(
      (x: { pathname: string; key: string }) => x.pathname === e.key
    );
    if (_page) {
      router.push(_page.pathname);
    }
  };

  return (
    <Menu
      onClick={onClick}
      selectedKeys={[activeKey || ""]}
      mode="vertical"
      items={items as any}
      style={{ width: "280px" }}
    />
  );
}
